<template>
  <Row>
    <Col span="23" offset="1">
      <h2>专业知识库</h2>
      <div style="display: flex; position: absolute; top: -20px; right: 70px">
        <el-input
          v-model="inputSearchText"
          placeholder="请输入内容"
          class="project-input"
          clearable
          @keyup.enter.native="search"
          @clear="readResource"
        ></el-input>
        <el-button class="search-btn" type="primary" @click="search">搜索</el-button>
      </div>

      <div class="main" :style="{ height: contentHeight }">
        <div class="resourcePanel">
          <div class="resourcePanel" style="margin-top: 25px">
            <Row style="height: 100%; overflow-y: auto">
              <template>
                <Col span="23" offset="0">
                  <Card class="symbols_type_max" v-if="heightMax" dis-hover>
                    <div
                      slot="title"
                      style="display: flex; align-items: center; height: 25px"
                    >
                      <el-checkbox
                        :indeterminate="isIndeterminate"
                        v-model="checkAll"
                        @change="handleCheckAllChange"
                        style="margin-left: 10px"
                        >全选</el-checkbox
                      >
                      <div style="margin-left: 10px" v-if="!searchFinished">
                        <Breadcrumb>
                          <BreadcrumbItem
                            v-for="(folder, index) in folderStack"
                            :key="folder.id"
                            @click.native="switchFolder(folder, index)"
                            style="cursor: pointer; margin-left: 7px"
                          >
                            <span style="color: #2d8cf0">{{ folder.name }}</span>
                          </BreadcrumbItem>
                        </Breadcrumb>
                      </div>
                      <div
                        style="margin-left: 25px"
                        v-if="inputSearchText != '' && searchFinished"
                      >
                        <span style="color: #2d8cf0; font-weight: 700"
                          >搜索“{{ inputSearchText }}”的结果</span
                        >
                      </div>
                      <Divider type="vertical" style="margin-left: 20px" />
                      <div style="flex: 1; margin-left: 10px">
                        <Tooltip content="Back" placement="bottom" class="fileBtn">
                          <Icon
                            type="md-arrow-round-back"
                            @click="gobackFolder"
                            style="cursor: pointer; color: #08ab2b"
                            size="20"
                          />
                        </Tooltip>
                        <Tooltip
                          content="New folder"
                          placement="bottom"
                          class="fileBtn"
                          v-if="!searchFinished"
                        >
                          <Icon
                            type="ios-folder"
                            @click="addFolderModalShow"
                            style="cursor: pointer; color: #f9c245; margin-left: 7px"
                            size="20"
                          />
                        </Tooltip>
                      </div>
                      <div style="align-items: flex-end">
                        <Tooltip
                          content="下载所选资源"
                          placement="bottom"
                          class="fileBtn"
                        >
                          <Button
                            @click="downloadSelectFile"
                            v-show="checkedSymbols.length > 0"
                            shape="circle"
                            icon="md-cloud-download"
                            class="fileBtnHoverGray"
                          ></Button>
                        </Tooltip>
                        <!-- 删除资源 需要判断权限 -->
                        <Tooltip
                          content="删除所选资源"
                          placement="bottom"
                          class="fileBtn"
                        >
                          <Button
                            @click="deleteSelectFile"
                            v-show="checkedSymbols.length > 0 && userInfo.role == 'admin'"
                            shape="circle"
                            icon="md-trash"
                            class="fileBtnHoverRed"
                          ></Button>
                        </Tooltip>
                        <!-- 上传资源 需要判断权限 -->
                        <Tooltip content="上传资源" placement="bottom" class="fileBtn">
                          <Button
                            @click="toUpload()"
                            v-show="userInfo.role == 'admin'"
                            shape="circle"
                            icon="md-cloud-upload"
                            class="fileBtnHoverGreen"
                          ></Button>
                        </Tooltip>
                      </div>
                    </div>
                    <div
                      v-if="
                        currentFolder.folders.length > 0 || currentFolder.files.length > 0
                      "
                    >
                      <el-row style="height: 100%">
                        <!-- 文件夹 -->
                        <el-col
                          :span="4"
                          v-for="item in currentFolder.folders"
                          :key="item.id"
                        >
                          <Dropdown
                            :padding="5"
                            trigger="contextMenu"
                            style="margin-left: 7px; margin-top: 10px"
                            placement="bottom-end"
                          >
                            <Card class="folderCard">
                              <el-row style="height: 100%">
                                <el-col :span="5"
                                  >&nbsp;
                                  <div
                                    style="margin: 4px; float: inherit; cursor: pointer"
                                    v-if="item.folder == false"
                                  >
                                    <i style="font-size: 16px; color: #1b7cde"></i>
                                  </div>
                                </el-col>
                                <el-col :span="15" style="height: 100%">
                                  <img
                                    class="fileImg folderImg"
                                    src="@/assets/images/folder.png"
                                    align="middle"
                                    @dblclick="enterFolder(item)"
                                    style="
                                      height: 100%;
                                      width: 100%;
                                      object-fit: contain;
                                      cursor: pointer;
                                    "
                                  />
                                </el-col>
                                <el-col :span="4"> </el-col>
                              </el-row>
                              <el-row
                                type="flex"
                                justify="center"
                                v-if="item"
                                class="fileName"
                                @click.native="enterFolder(item)"
                                style="cursor: pointer"
                              >
                                <p
                                  style="text-align: center; word-break: break-all"
                                  v-if="item"
                                >
                                  {{ item.name }}
                                </p>
                                <p v-if="item.suffix">.</p>
                                <p v-if="item.suffix">{{ item.suffix }}</p>
                              </el-row>
                            </Card>
                            <DropdownMenu slot="list">
                              <DropdownItem @click.native="enterFolder(item)"
                                >进入文件夹</DropdownItem
                              >
                              <!-- <DropdownItem>详细信息</DropdownItem> -->
                              <!-- <DropdownItem @click="downloadSingleFile(item)">下载</DropdownItem> -->
                              <DropdownItem
                                style="color: #ed4014"
                                v-show="userInfo.role == 'admin'"
                                @click.native="deleteSingleSelectFile(item)"
                                >删除</DropdownItem
                              >
                            </DropdownMenu>
                          </Dropdown>
                        </el-col>
                        <!-- 文件 -->
                        <el-col
                          :span="4"
                          v-for="item in currentFolder.files"
                          :key="item.id"
                        >
                          <CheckboxGroup
                            v-model="checkedSymbols"
                            @on-change="handleCheckedSymbolsChange"
                          >
                            <!-- <Dropdown trigger="contextMenu" :padding="5" style="margin-left:7px; margin-top:10px;"> -->
                            <Card
                              :padding="5"
                              style="margin-left: 7px; margin-top: 10px"
                              :style="{
                                height: folderCardHeight + 3 + 'px',
                                width: folderCardWidth + 'px',
                              }"
                            >
                              <el-row style="height: 80%">
                                <el-col :span="6"
                                  >&nbsp;
                                  <div
                                    style="
                                      cursor: pointer;
                                      position: absolute;
                                      top: 5px;
                                      left: 5px;
                                    "
                                  >
                                    <Checkbox :label="item.id" style="font-size: 16px"
                                      >&nbsp;</Checkbox
                                    >
                                    <!-- <i style="font-size: 16px;color:#1b7cde"></i> -->
                                  </div>
                                </el-col>
                                <el-col
                                  :span="15"
                                  style="height: 100%; margin: 5% 0"
                                  :style="{
                                    height: boxImgSize + 'px',
                                    width: boxImgSize + 'px',
                                  }"
                                >
                                  <img
                                    class="fileImg"
                                    :src="dataSever + item.url"
                                    align="middle"
                                    alt="图片"
                                    @dblclick="preview(item)"
                                    style="
                                      height: 100%;
                                      width: 100%;
                                      object-fit: contain;
                                      cursor: pointer;
                                    "
                                  />
                                </el-col>
                                <el-col :span="3"> </el-col>
                              </el-row>
                              <el-row
                                type="flex"
                                justify="center"
                                v-if="item"
                                class="fileName"
                                @click.native="preview(item)"
                                style="cursor: pointer"
                              >
                                <p
                                  style="
                                    text-align: center;
                                    word-break: break-all;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                  "
                                  v-if="item"
                                >
                                  {{ item.name }}
                                </p>
                                <p v-if="item.suffix">.</p>
                                <p v-if="item.suffix">{{ item.suffix }}</p>
                              </el-row>
                            </Card>
                            <!-- <DropdownMenu slot="list">
                                  <DropdownItem>返回</DropdownItem>
                                  <DropdownItem style="color: #ed4014">删除</DropdownItem>
                                </DropdownMenu>
                              </Dropdown> -->
                          </CheckboxGroup>
                        </el-col>
                      </el-row>
                    </div>
                    <div v-else style="text-align: center">
                      <div
                        style="
                          color: lightgray;
                          font-size: 2em;
                          font-weight: bold;
                          margin-top: 50px;
                        "
                      >
                        No file or folder
                      </div>
                    </div>
                  </Card>
                  <Card class="symbols_type" v-if="!heightMax" dis-hover>
                    <div
                      slot="title"
                      style="display: flex; align-items: center; height: 25px"
                    >
                      <el-checkbox
                        :indeterminate="isIndeterminate"
                        v-model="checkAll"
                        @change="handleCheckAllChange"
                        style="margin-left: 10px"
                        >全选</el-checkbox
                      >
                      <div style="margin-left: 10px" v-if="!searchFinished">
                        <Breadcrumb>
                          <BreadcrumbItem
                            v-for="(folder, index) in folderStack"
                            :key="folder.id"
                            @click.native="switchFolder(folder, index)"
                            style="cursor: pointer; margin-left: 7px"
                          >
                            <span style="color: #2d8cf0">{{ folder.name }}</span>
                          </BreadcrumbItem>
                        </Breadcrumb>
                      </div>
                      <div
                        style="margin-left: 25px"
                        v-if="inputSearchText != '' && searchFinished"
                      >
                        <span style="color: #2d8cf0; font-weight: 700"
                          >搜索“{{ inputSearchText }}”的结果</span
                        >
                      </div>
                      <Divider type="vertical" style="margin-left: 20px" />
                      <div style="flex: 1; margin-left: 10px">
                        <Tooltip content="Back" placement="bottom" class="fileBtn">
                          <Icon
                            type="md-arrow-round-back"
                            @click="gobackFolder"
                            style="cursor: pointer; color: #08ab2b"
                            size="20"
                          />
                        </Tooltip>
                        <Tooltip
                          content="New folder"
                          placement="bottom"
                          class="fileBtn"
                          v-if="!searchFinished"
                        >
                          <Icon
                            type="ios-folder"
                            @click="addFolderModalShow"
                            style="cursor: pointer; color: #f9c245; margin-left: 7px"
                            size="20"
                          />
                        </Tooltip>
                      </div>
                      <div style="align-items: flex-end">
                        <Tooltip
                          content="下载所选资源"
                          placement="bottom"
                          class="fileBtn"
                        >
                          <Button
                            @click="downloadSelectFile"
                            v-show="checkedSymbols.length > 0"
                            shape="circle"
                            icon="md-cloud-download"
                            class="fileBtnHoverGray"
                          ></Button>
                        </Tooltip>
                        <!-- 删除资源 需要判断权限 -->
                        <Tooltip
                          content="删除所选资源"
                          placement="bottom"
                          class="fileBtn"
                        >
                          <Button
                            @click="deleteSelectFile"
                            v-show="checkedSymbols.length > 0 && userInfo.role == 'admin'"
                            shape="circle"
                            icon="md-trash"
                            class="fileBtnHoverRed"
                          ></Button>
                        </Tooltip>
                        <!-- 上传资源 需要判断权限 -->
                        <Tooltip content="上传资源" placement="bottom" class="fileBtn">
                          <Button
                            @click="toUpload()"
                            v-show="userInfo.role == 'admin'"
                            shape="circle"
                            icon="md-cloud-upload"
                            class="fileBtnHoverGreen"
                          ></Button>
                        </Tooltip>
                      </div>
                    </div>
                    <div
                      v-if="
                        currentFolder.folders.length > 0 || currentFolder.files.length > 0
                      "
                    >
                      <el-row style="height: 100%">
                        <!-- 文件夹 -->
                        <el-col
                          :span="4"
                          v-for="item in currentFolder.folders"
                          :key="item.id"
                        >
                          <Dropdown
                            :padding="5"
                            trigger="contextMenu"
                            style="margin-left: 7px; margin-top: 10px"
                            placement="bottom-end"
                          >
                            <Card class="folderCard">
                              <el-row style="height: 100%">
                                <el-col :span="5"
                                  >&nbsp;
                                  <div
                                    style="margin: 4px; float: inherit; cursor: pointer"
                                    v-if="item.folder == false"
                                  >
                                    <i style="font-size: 16px; color: #1b7cde"></i>
                                  </div>
                                </el-col>
                                <el-col :span="15" style="height: 100%">
                                  <img
                                    class="fileImg"
                                    src="@/assets/images/folder.png"
                                    align="middle"
                                    @dblclick="enterFolder(item)"
                                    style="
                                      height: 100%;
                                      width: 100%;
                                      object-fit: contain;
                                      cursor: pointer;
                                    "
                                  />
                                </el-col>
                                <el-col :span="4"> </el-col>
                              </el-row>
                              <el-row
                                type="flex"
                                justify="center"
                                v-if="item"
                                class="fileName"
                                @click.native="enterFolder(item)"
                                style="cursor: pointer"
                              >
                                <p
                                  style="text-align: center; word-break: break-all"
                                  v-if="item"
                                >
                                  {{ item.name }}
                                </p>
                                <p v-if="item.suffix">.</p>
                                <p v-if="item.suffix">{{ item.suffix }}</p>
                              </el-row>
                            </Card>
                            <DropdownMenu slot="list">
                              <DropdownItem @click.native="enterFolder(item)"
                                >进入文件夹</DropdownItem
                              >
                              <!-- <DropdownItem>详细信息</DropdownItem> -->
                              <!-- <DropdownItem @click="downloadSingleFile(item)">下载</DropdownItem> -->
                              <DropdownItem
                                style="color: #ed4014"
                                v-show="userInfo.role == 'admin'"
                                @click.native="deleteSingleSelectFile(item)"
                                >删除</DropdownItem
                              >
                            </DropdownMenu>
                          </Dropdown>
                        </el-col>
                        <!-- 文件 -->
                        <el-col
                          :span="4"
                          v-for="item in currentFolder.files"
                          :key="item.id"
                        >
                          <CheckboxGroup
                            v-model="checkedSymbols"
                            @on-change="handleCheckedSymbolsChange"
                          >
                            <!-- <Dropdown trigger="contextMenu" :padding="5" style="margin-left:7px; margin-top:10px;"> -->
                            <Card
                              :padding="5"
                              style="margin-left: 7px; margin-top: 10px"
                              :style="{
                                height: folderCardHeight + 3 + 'px',
                                width: folderCardWidth + 'px',
                              }"
                            >
                              <el-row style="height: 80%">
                                <el-col :span="6"
                                  >&nbsp;
                                  <div
                                    style="
                                      cursor: pointer;
                                      position: absolute;
                                      top: 5px;
                                      left: 5px;
                                    "
                                  >
                                    <Checkbox :label="item.id" style="font-size: 16px"
                                      >&nbsp;</Checkbox
                                    >
                                    <!-- <i style="font-size: 16px;color:#1b7cde"></i> -->
                                  </div>
                                </el-col>
                                <el-col
                                  :span="15"
                                  style="height: 100%; margin: 5% 0"
                                  :style="{
                                    height: boxImgSize + 'px',
                                    width: boxImgSize + 'px',
                                  }"
                                >
                                  <img
                                    class="fileImg"
                                    :src="dataSever + item.url"
                                    align="middle"
                                    alt="图片"
                                    @dblclick="preview(item)"
                                    style="
                                      height: 100%;
                                      width: 100%;
                                      object-fit: contain;
                                      cursor: pointer;
                                    "
                                  />
                                </el-col>
                                <el-col :span="3"> </el-col>
                              </el-row>
                              <el-row
                                type="flex"
                                justify="center"
                                v-if="item"
                                class="fileName"
                                @click.native="preview(item)"
                                style="cursor: pointer"
                              >
                                <p
                                  style="
                                    text-align: center;
                                    word-break: break-all;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                  "
                                  v-if="item"
                                >
                                  {{ item.name }}
                                </p>
                                <p v-if="item.suffix">.</p>
                                <p v-if="item.suffix">{{ item.suffix }}</p>
                              </el-row>
                            </Card>
                            <!-- <DropdownMenu slot="list">
                                  <DropdownItem>返回</DropdownItem>
                                  <DropdownItem style="color: #ed4014">删除</DropdownItem>
                                </DropdownMenu>
                              </Dropdown> -->
                          </CheckboxGroup>
                        </el-col>
                      </el-row>
                    </div>
                    <div v-else style="text-align: center">
                      <div
                        style="
                          color: lightgray;
                          font-size: 2em;
                          font-weight: bold;
                          margin-top: 50px;
                        "
                      >
                        No file or folder
                      </div>
                    </div>
                  </Card>
                </Col>
              </template>
            </Row>
          </div>
          <div
            class="resourcePanel"
            style="display: flex; justify-content: center; margin-top: 10px"
          >
            <Page
              :total="dataCount"
              :page-size="pageSize"
              :current="currentPage"
              show-total
              @on-change="changepage"
              show-elevator
            />
          </div>
        </div>
      </div>
    </Col>
    <Modal
      v-model="uploadModal"
      title="上传资源"
      @on-ok="submitFile()"
      ok-text="Submit"
      cancel-text="Cancel"
      :mask-closable="false"
      width="600px"
    >
      <div style="display: flex; align-items: center; justify-content: center">
        <!-- 这里定义上传的几种资源类型供用户选择 -->
        <span style="width: 20%; text-align: center">上传类型： </span>
        <RadioGroup v-model="fileType" style="width: 80%; float: left">
          <Radio label="single">单文件</Radio>
          <Radio label="multi">多文件</Radio>
          <Radio label="compressed">压缩文件</Radio>
        </RadioGroup>
        <!-- 结束 -->
      </div>
      <br />
      <div style="display: flex; align-items: center; justify-content: center">
        <span style="width: 20%; text-align: center">资源描述：</span>
        <Input
          type="textarea"
          :rows="2"
          v-model="fileDescription"
          style="width: 80%; float: left"
        />
      </div>
      <br />
      <!-- <input type="file" style="margin-left:20%" multiple="multiple" v-if="fileType == 'multi' || fileType == 'compressed'"/>
      <input type="file" style="margin-left:20%" v-else/> -->
      <Upload
        :max-size="1024 * 1024"
        v-if="fileType == 'single' || fileType == 'compressed'"
        type="drag"
        :before-upload="gatherFile"
        action="-"
      >
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
          <p>
            点击或拖拽文件上传 ( 文件大小不超过
            <span style="color: red">2GB</span>)
          </p>
        </div>
      </Upload>
      <Upload
        :max-size="1024 * 1024"
        multiple
        v-else
        type="drag"
        :before-upload="gatherFile"
        action="-"
      >
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
          <p>
            点击或拖拽文件上传 ( 文件大小不超过
            <span style="color: red">2GB</span>)
          </p>
        </div>
      </Upload>
      <div style="padding: 0 10px 0 10px; max-height: 200px; overflow-y: auto">
        <ul v-for="(list, index) in toUploadFiles" :key="index">
          <li style="display: flex">
            File name:
            <span style="font-size: 10px; margin: 0 5px 0 5px"
              >{{ list.name }} ( {{ list.fileSize }} )</span
            >
            <Icon
              type="ios-close"
              size="20"
              @click="delFileList(index)"
              style="display: flex; justify-content: flex-end; cursor: pointer"
            ></Icon>
          </li>
        </ul>
      </div>
    </Modal>
    <Modal v-model="newFolderModal" title="新建文件夹">
      <Form
        ref="newValidate"
        :model="newValidate"
        :rules="newRuleValidate"
        :label-width="80"
      >
        <FormItem label="设置名字" prop="setName">
          <el-input
            v-model="newValidate.setName"
            placeholder="输入文件夹的名字..."
            @keyup.enter.native="addFolder()"
          />
        </FormItem>
        <FormItem style="display: none">
          <el-input style="display: none" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="newFolderModal = false">取消</Button>
        <Button type="success" @click="addFolder()">新建</Button>
      </div>
    </Modal>
    <Modal v-model="previewModalShow" title="查看" width="900">
      <iframe
        :src="previewUrl"
        frameborder="0"
        style="width: 100%; height: 100%; min-height: 450px"
      ></iframe>
      <div slot="footer">
        <Button type="success" @click="previewModalShow = false">确定</Button>
      </div>
    </Modal>
  </Row>
</template>

<script>
import { get, post, del, put } from "@/axios";

export default {
  watch: {
    fileType(val) {
      this.toUploadFiles = [];
      this.fileDescription = "";
    },
    currentFolderNum(val) {
      // console.log(val);
      if (val > 18) {
        this.switchFolder(
          this.folderStack[this.folderStack.length - 1],
          this.folderIdStack.length
        );
      }
    },
    inputSearchText(val) {
      this.searchFinished = false;
    },
  },
  data() {
    return {
      ops: {
        bar: {
          background: "#808695",
        },
      },
      defaultProps: {
        children: "children",
        label: "label",
      },
      currentFolder: {
        folders: [],
        files: [],
      },
      currentFolderNum: 0,
      pathStr: "",
      rootFolderPath: "4",
      folderStack: [{ id: 0, name: "专业知识库" }],
      folderIdStack: [],
      delCount: 0,

      newFolderModal: false,
      newValidate: {
        setName: "",
      },
      newRuleValidate: {
        setName: [
          {
            required: true,
            message: "The name can't be null.",
            trigger: "blur",
          },
        ],
      },
      toUploadFiles: [],
      fileCountTimer: null,

      dataCount: 0,
      pageSize: 18,
      currentPage: 1,
      // 上传文件的模态框
      uploadModal: false,
      file: "",
      fileDescription: "",
      fileType: "single",
      contentHeight: "",
      panel: null,
      isCollapse: true,

      checkAll: false,
      checkedSymbols: [],
      isIndeterminate: false,

      inputSearchText: "",
      searchFinished: false,
      libraryFileType: "Image",
      panel: null,
      previewModalShow: false,
      previewUrl: "",
      dataSever: "",
      userInfo: {},
      heightMax: false,
      boxImgSize: 0,
      folderCardHeight: 0,
      folderCardWidth: 0,
    };
  },

  mounted() {
    this.initLayout();
    this.dataSever = this.$store.getters.dataSever;
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.readResource();
  },
  created() {
    // this.setSlist(this.symbolList);
  },

  methods: {
    async search() {
      this.currentPage = 1;
      if (this.inputSearchText == "") {
        this.readResource();
      } else {
        // console.log(this.inputSearchText);
        let reqInfo = {
          asc: false,
          page: 0,
          pageSize: 18,
          searchField: "name",
          searchText: this.inputSearchText,
        };
        let that = this;
        try {
          let res = await post(
            "/visualResourceLibrary/res/resource/query/" + this.libraryFileType,
            reqInfo
          );
          // console.log(res);
          let resList = res.data.data.content;
          that.dataCount = res.data.data.total;
          that.currentFolder.folders = [];
          that.currentFolder.files = [];
          if (resList.length > 0) {
            for (let i = 0; i < resList.length; i++) {
              if (
                resList[i].type &&
                resList[i].type != null &&
                resList[i].type != undefined &&
                resList[i].type != ""
              ) {
                that.currentFolder.files.push(resList[i]);
              } else {
                that.currentFolder.folders.push(resList[i]);
              }
            }
          }
          that.currentFolderNum =
            that.currentFolder.folders.length + that.currentFolder.files.length;
          //清除文件夹结构
          that.folderStack = [{ id: 0, name: "专业知识库" }];
          that.folderIdStack = [];
          that.searchFinished = true;
        } catch (e) {
          console.log(e);
        }
      }
    },

    //实现全选功能
    handleCheckAllChange(val) {
      //map() 方法创建一个新数组，其中填充了对调用数组中的每个元素调用提供的函数的结果。
      //在该函数中将symbolList数组中的元素id提取出来，存入数组all中。
      const all = this.currentFolder.files.map((item) => {
        return item.id;
      });
      this.checkedSymbols = val ? all : [];
      this.isIndeterminate = false;
    },
    handleCheckedSymbolsChange(value) {
      //checkedCount 为选中符号的数量
      let checkedCount = value.length;
      //如果选中符号的数量（checkedCount）与所有符号的数量（this.symbolList.length）一致，则将checkAll的状态改成true，否则改成false
      this.checkAll = checkedCount === this.currentFolder.files.length;
      //如果选中符号的数量（checkedCount）大于0且选中符号的数量（checkedCount）小于所有符号的数量（this.symbolList.length），则将isIndeterminate的状态改成true，否则将isIndeterminate的状态改成false。
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.currentFolder.files.length;
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    initLayout() {
      this.contentHeight = window.innerHeight - 120 + "px";
      if (document.documentElement.offsetHeight > 900) {
        this.heightMax = true;
      } else {
        this.heightMax = false;
      }
    },
    async readResource() {
      this.currentFolder.folders = [];
      this.currentFolder.files = [];
      let reqInfo = {
        asc: false,
        page: 0,
        pageSize: 18,
      };
      let that = this;
      try {
        let res = await post("/visualResourceLibrary/res/resource/browse/4", reqInfo);
        // console.log(res);
        let resList = res.data.data.content;
        that.dataCount = res.data.data.total;
        if (resList.length > 0) {
          for (let i = 0; i < resList.length; i++) {
            if (
              resList[i].type &&
              resList[i].type != null &&
              resList[i].type != undefined &&
              resList[i].type != ""
            ) {
              that.currentFolder.files.push(resList[i]);
            } else {
              that.currentFolder.folders.push(resList[i]);
            }
          }
        }
        that.currentFolderNum =
          that.currentFolder.folders.length + that.currentFolder.files.length;
        that.searchFinished = false;
        that.inputSearchText = "";
        // 获取boxImg高度
        setTimeout(() => {
          let boxImgList = document.getElementsByClassName("fileImg");
          let folderCardList = document.getElementsByClassName("folderCard");
          // console.log(boxImgList[0].clientHeight);
          this.boxImgSize = boxImgList[0].clientHeight;
          this.folderCardHeight = folderCardList[0].clientHeight;
          this.folderCardWidth = folderCardList[0].clientWidth;
        }, 500);
      } catch (e) {
        console.log(e);
      }
    },
    async submitFile() {
      // 区分单文件上传、多文件上传和压缩包上传
      let that = this;
      if (this.fileType == "compressed") {
        // 压缩文件
        let uploadFiles = this.toUploadFiles[0];
        let formData = new FormData();
        formData.append("file", uploadFiles);
        let temp = "";
        if (this.folderIdStack.length == 0) {
          temp = this.rootFolderPath;
        } else {
          temp = this.folderIdStack[0];
        }
        formData.append("type", this.libraryFileType);
        formData.append("description", this.fileDescription);
        formData.append("folderId", temp);
        try {
          let res = await post("/visualResourceLibrary/res/unZip", formData);
          // console.log(res);
          this.$Message.success("上传成功");
          that.switchFolder(
            that.folderStack[that.folderStack.length - 1],
            that.folderIdStack.length
          );
        } catch (e) {
          this.$Message.error("修改失败");
          console.log(e);
        }
      } else {
        // 一般文件
        let uploadFiles = this.toUploadFiles;
        let formData = new FormData();
        for (let i = 0; i < uploadFiles.length; i++) {
          formData.append("file", uploadFiles[i]);
        }
        let temp = "";
        if (this.folderIdStack.length == 0) {
          temp = this.rootFolderPath;
        } else {
          temp = this.folderIdStack[0];
        }
        formData.append("type", this.libraryFileType);
        formData.append("description", this.fileDescription);
        formData.append("folderId", temp);
        try {
          let res = await post("/visualResourceLibrary/res", formData);
          // console.log(res);
          this.$Notice.info({
            title: "上传结果",
            desc:
              "失败： " +
              (res.data.data.failed.length + res.data.data.sizeOver.length) +
              ", 成功： " +
              res.data.data.uploaded.length,
          });
          for (let i = 0; i < res.data.data.uploaded.length; i++) {
            that.currentFolder.files.push(res.data.data.uploaded[i]);
          }
          that.currentFolderNum =
            that.currentFolder.folders.length + that.currentFolder.files.length;
        } catch (e) {
          this.$Message.error("修改失败");
          console.log(e);
        }
      }
    },
    enterFolder(item) {
      this.checkedSymbols = [];
      this.checkAll = false;
      this.isIndeterminate = false;
      this.folderIdStack.unshift(item.id);

      this.changeFolder(item, "enter");
    },
    gobackFolder() {
      this.checkedSymbols = [];
      this.checkAll = false;
      this.isIndeterminate = false;
      if (this.folderStack.length != 1) {
        //folderStack 倒数第二个就是其的父文件夹
        this.folderIdStack.splice(0, 1);
        this.changeFolder(this.folderStack[this.folderStack.length - 2], "back");
      } else {
        if (this.inputSearchText != "") {
          this.readResource();
        } else {
          this.$Message.warning("这是根目录。");
        }
      }
    },
    switchFolder(folder, index) {
      this.currentPage = 1;
      this.delCount = this.folderStack.length - index - 1;
      this.folderIdStack.splice(0, this.delCount);
      this.changeFolder(folder, "switch");
    },
    async changeFolder(folder, operationType) {
      // 清空搜索内容
      this.inputSearchText = "";
      // 清空当前页面文件
      this.currentFolder.folders = [];
      this.currentFolder.files = [];
      let temp = "";
      if (this.folderIdStack.length == 0) {
        temp = this.rootFolderPath;
      } else {
        temp = this.folderIdStack[0];
      }
      // console.log("paths: " + temp);
      let reqInfo = {
        asc: false,
        page: 0,
        pageSize: 18,
      };

      //向后台发送请求
      if (operationType == "enter") {
        //进入文件夹
        this.folderStack.push(folder);
        let that = this;
        try {
          let res = await post(
            "/visualResourceLibrary/res/resource/browse/" + temp,
            reqInfo
          );
          // console.log(res);
          let resList = res.data.data.content;
          that.dataCount = res.data.data.total;
          if (resList.length > 0) {
            for (let i = 0; i < resList.length; i++) {
              if (
                resList[i].type &&
                resList[i].type != null &&
                resList[i].type != undefined &&
                resList[i].type != ""
              ) {
                that.currentFolder.files.push(resList[i]);
              } else {
                that.currentFolder.folders.push(resList[i]);
              }
            }
          }
        } catch (e) {
          console.log(e);
        }
      } else if (operationType == "back") {
        //返回上一级
        this.folderStack.pop();

        let that = this;
        try {
          let res = await post(
            "/visualResourceLibrary/res/resource/browse/" + temp,
            reqInfo
          );
          // console.log(res);
          let resList = res.data.data.content;
          that.dataCount = res.data.data.total;
          if (resList.length > 0) {
            for (let i = 0; i < resList.length; i++) {
              if (
                resList[i].type &&
                resList[i].type != null &&
                resList[i].type != undefined &&
                resList[i].type != ""
              ) {
                that.currentFolder.files.push(resList[i]);
              } else {
                that.currentFolder.folders.push(resList[i]);
              }
            }
          }
        } catch (e) {
          console.log(e);
        }
      } else if (operationType == "switch") {
        //进入某一级
        for (let i = 0; i < this.delCount; i++) {
          this.folderStack.pop();
        }
        let that = this;
        try {
          let res = await post(
            "/visualResourceLibrary/res/resource/browse/" + temp,
            reqInfo
          );
          // console.log(res);
          let resList = res.data.data.content;
          that.dataCount = res.data.data.total;
          if (resList.length > 0) {
            for (let i = 0; i < resList.length; i++) {
              if (
                resList[i].type &&
                resList[i].type != null &&
                resList[i].type != undefined &&
                resList[i].type != ""
              ) {
                that.currentFolder.files.push(resList[i]);
              } else {
                that.currentFolder.folders.push(resList[i]);
              }
            }
          }
        } catch (e) {
          console.log(e);
        }
      }
      this.currentFolderNum =
        this.currentFolder.folders.length + this.currentFolder.files.length;
    },
    addFolderModalShow() {
      this.newValidate.setName = "";
      this.newFolderModal = true;
    },
    async addFolder() {
      if (this.newValidate.setName != "") {
        let temp = "";
        if (this.folderIdStack.length == 0) {
          temp = this.rootFolderPath;
        } else {
          temp = this.folderIdStack[0];
        }

        try {
          let res = await post(
            "/visualResourceLibrary/folder/" + temp + "/" + this.newValidate.setName
          );
          // console.log(res);
          this.currentFolder.folders.push(res.data.data);
          this.newFolderModal = false;
          this.currentFolderNum =
            this.currentFolder.folders.length + this.currentFolder.files.length;
        } catch (e) {
          console.log(e);
        }
      }
    },
    toUpload() {
      this.fileDescription = "";
      this.toUploadFiles = [];
      this.uploadModal = true;
    },
    gatherFile(file) {
      let fileType = file.name.split(".")[1];
      if (
        this.fileType == "compressed" &&
        fileType != "zip" &&
        fileType != "rar" &&
        fileType != "7z"
      ) {
        this.$Message.warning("请上传压缩包");
        return false;
      }
      let that = this;
      if (that.toUploadFiles.length >= 10) {
        if (this.fileCountTimer != null) {
          clearTimeout(this.fileCountTimer);
        }
        this.fileCountTimer = setTimeout(() => {
          this.$Message.info("最多只能上传10个文件");
        }, 500);
      } else {
        var fileSize = file.size;
        if (fileSize < 1024) {
          file.fileSize = fileSize + "b";
        } else if (fileSize < 1024 * 1024) {
          file.fileSize = Math.round((fileSize / 1024) * 100) / 100 + "Kb";
        } else {
          file.fileSize = Math.round((fileSize / (1024 * 1024)) * 100) / 100 + "Mb";
        }
        that.toUploadFiles.push(file);
        // console.log(file);
      }
      return false;
    },
    delFileList(index) {
      this.toUploadFiles.splice(index, 1);
    },
    async downloadSelectFile() {
      // console.log(this.checkedSymbols.toString());
      try {
        window.open("/visualResourceLibrary/res/down/" + this.checkedSymbols.toString());
      } catch (e) {
        console.log(e);
      }
    },
    async downloadSingleFile(item) {
      try {
        window.open("/visualResourceLibrary/res/down/" + item.id);
      } catch (e) {
        console.log(e);
      }
    },
    async deleteSingleSelectFile(item) {
      let that = this;
      try {
        let res = await get("/visualResourceLibrary/folder/delete/" + item.id);
        // console.log(res);
        for (let i = 0; i < that.currentFolder.folders.length; i++) {
          if (that.currentFolder.folders[i].id == item.id) {
            that.currentFolder.folders.splice(i, 1);
          }
        }
        that.currentFolderNum =
          that.currentFolder.folders.length + that.currentFolder.files.length;
      } catch (e) {
        console.log(e);
      }
    },
    async deleteSelectFile() {
      // console.log(this.checkedSymbols.toString());
      if (this.checkedSymbols.length > 0) {
        let temp = "";
        if (this.folderIdStack.length == 0) {
          temp = this.rootFolderPath;
        } else {
          temp = this.folderIdStack[0];
        }
        let that = this;

        try {
          await get(
            "/visualResourceLibrary/res/delete/" +
              temp +
              "/" +
              this.checkedSymbols.toString()
          );
          for (let i = 0; i < that.currentFolder.files.length; i++) {
            for (let j = 0; j < that.checkedSymbols.length; j++) {
              if (that.currentFolder.files[i].id == that.checkedSymbols[j]) {
                that.currentFolder.files.splice(i, 1);
              }
            }
          }
          that.currentFolderNum =
            that.currentFolder.folders.length + that.currentFolder.files.length;
        } catch (e) {
          console.log(e);
        }
      }
    },
    async changepage(index) {
      this.currentPage = index;

      this.currentFolder.folders = [];
      this.currentFolder.files = [];
      let temp = "";
      if (this.folderIdStack.length == 0) {
        temp = this.rootFolderPath;
      } else {
        temp = this.folderIdStack[0];
      }
      let reqInfo = {
        asc: false,
        page: index - 1,
        pageSize: 18,
      };
      //判断是否为搜索
      if (this.inputSearchText == "") {
        //正常的进入文件夹翻页
        let that = this;
        try {
          let res = await post(
            "/visualResourceLibrary/res/resource/browse/" + temp,
            reqInfo
          );
          // console.log(res);
          let resList = res.data.data.content;
          that.dataCount = res.data.data.total;
          if (resList.length > 0) {
            for (let i = 0; i < resList.length; i++) {
              if (
                resList[i].type &&
                resList[i].type != null &&
                resList[i].type != undefined &&
                resList[i].type != ""
              ) {
                that.currentFolder.files.push(resList[i]);
              } else {
                that.currentFolder.folders.push(resList[i]);
              }
            }
          }
          that.currentFolderNum =
            that.currentFolder.folders.length + that.currentFolder.files.length;
        } catch (e) {
          console.log(e);
        }
      } else {
        //搜索的翻页
        reqInfo.searchField = "name";
        reqInfo.searchText = this.inputSearchText;
        let that = this;
        try {
          let res = await post(
            "/visualResourceLibrary/res/resource/query/" + this.libraryFileType,
            reqInfo
          );
          // console.log(res);
          let resList = res.data.data.content;
          that.dataCount = res.data.data.total;
          that.currentFolder.folders = [];
          that.currentFolder.files = [];
          if (resList.length > 0) {
            for (let i = 0; i < resList.length; i++) {
              if (
                resList[i].type &&
                resList[i].type != null &&
                resList[i].type != undefined &&
                resList[i].type != ""
              ) {
                that.currentFolder.files.push(resList[i]);
              } else {
                that.currentFolder.folders.push(resList[i]);
              }
            }
          }
          that.currentFolderNum =
            that.currentFolder.folders.length + that.currentFolder.files.length;
          //清除文件夹结构
          that.folderStack = [{ id: 0, name: "专业知识库" }];
          that.folderIdStack = [];
        } catch (e) {
          console.log(e);
        }
      }
    },
    preview(item) {
      let url = this.dataSever + item.url;
      let Base64 = require("js-base64").Base64;
      // let finalUrl = "http://221.226.60.2:8082/picturesPreview?urls=" + encodeURIComponent(Base64.encode(url));
      // let finalUrl =
      //   "http://221.226.60.2:8082/onlinePreview?url=" +
      //   encodeURIComponent(Base64.encode(url));
      this.previewUrl = url;
      // this.previewUrl = url;
      this.previewModalShow = true;
    },
  },
  name: "SymbolLibrary",
};
</script>

<style scoped>
.main {
  display: flex;
}
.sidebarListTree {
  margin-top: 20px;
  border: 1px solid lightgray;
  z-index: 0;
  height: fit-content;
}
.resourcePanel {
  flex: 1;
}
.fileBtn {
  margin: 0px 3px;
}

.btnPanel {
  flex: 1;
}
.btnPanel button {
  margin-left: 20px;
}
.searchPanel {
  display: flex;
  float: right;
}
.ivu-table td,
.ivu-table th {
  height: 40px !important;
}
.project-input {
  margin-top: 20px;
  /*margin-bottom: 10px;*/
  /*margin-left: 4.16666667%;*/
  width: 400px;
}
.search-btn {
  margin-top: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
  /* font-size: 0.5rem; */
  width: 100px;
  background-color: rgba(21, 88, 145, 0.8);
  color: rgba(255, 255, 255, 1);
}
.el-cheack-symbol {
  height: 200px;
}
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-template-rows: 100px 100px 100px;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  text-align: center;
}
.img_performence {
  vertical-align: middle;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  height: 100%;
  padding: 0 !important;
}

.el-aside {
  background-color: #393e42;
  color: #333;
  height: 100vh;
}
.el-menu {
  border-right-width: 0;
}
.el-main {
  color: #333;
}
.el-menu-vertical:not(.el-menu--collapse) {
  width: 240px;
}
.box_bgd {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 54px;
}
.box_bgd i {
  font-size: 20px;
}
.box_bgd:hover {
  background-color: rgb(203, 215, 230);
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.level_btn {
  width: 100%;
  margin-left: 20px;
  height: 50px;
}
.symbols_type_max {
  height: 71vh;
  min-height: 420px;
  overflow-y: auto;
}
.symbols_type {
  height: 61vh;
  min-height: 420px;
  overflow-y: auto;
}
.input-style {
  /*margin-bottom: 10px;*/
  /*margin-left: 4.16666667%;*/
  width: 400px;
  margin-top: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  border: 1px solid lightgray;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.fileBtnHoverBlue:hover {
  background-color: #2db7f5;
  color: white;
}

.fileBtnHoverGreen:hover {
  background-color: #19be6b;
  color: white;
}

.fileBtnHoverOrange:hover {
  background-color: #ff9900;
  color: white;
}

.fileBtnHoverRed:hover {
  background-color: #ed4014;
  color: white;
}

.fileBtnHoverGray:hover {
  background-color: #808695;
  color: white;
}
</style>
